<template>
  <div>
    <ul class="admin">
      <li>{{name.totalReward}}</li>
      <li>已得奖励（USDT）</li>
    </ul>
    <div class="bi1">
      <div>
        <p>已邀请（人）</p>
        <p style="margin-left:50%">{{name.totalPeopleNumber}}</p>
      </div>

      <div>
        <p style="text-align: left;">推荐奖励（USDT）</p>
        <p>直接推荐 {{name.directReward}}</p>
        <p>下级推荐 {{name.subordinateReward}}</p>
      </div>
    </div>

    <div class="xian"></div>

    <!-- 下面的切换 -->
    <van-tabs v-model="active">
      <van-tab :title="abc">
        <div v-show="dataUide.length==0">
          <div>
            <img
              style="width:45px;height:45px;padding-top:100px;"
              src="../../assets/images/icon-record-gray.png"
              alt
            >
          </div>
          <div class="data">暂无相关数据</div>
          <div class="data1">快去邀请好友赚奖励吧~</div>
          <!-- 按钮 -->
        </div>
        <!-- 记录 -->
        <!-- 我们的优势 -->
        <div class="advantage">
          <div v-for="item in dataUide" :key="item.index" class="advantage-list">
            <div class="advantage-item">
              <div class="advantage-icon">
                <img style="width:7px;height:7px;" src="../../assets/images/icon-dot.png" alt>
              </div>
              <div class="advantage-con">
                <p class="title">
                  +86 {{item.phoneNo}}
                  <span
                    style="position: absolute;right: 20px;"
                  >{{item.turnoverAmount}}USDT</span>
                </p>
                <p class="cont">{{item.createTime}}</p>
              </div>
            </div>
          </div>
        </div>
        <p v-show="dataUide.length!=0"
          v-if="flagBtm"
          style="font-size: 10px; color: rgb(204, 204, 204); margin: 40px 0;"
        >没有更多数据了！！！</p>
        <!-- 按钮 -->
        <div class="submit">
          <button type="submit" class="submit-btn" @click="showPopup">立即邀请</button>
        </div>

        <!-- </div> -->
      </van-tab>
      <van-tab :title="bbb">
        <!-- 记录 -->
        <div v-show="dataQuin.length==0">
          <div>
            <img
              style="width:45px;height:45px;padding-top:100px;"
              src="../../assets/images/icon-record-gray.png"
              alt
            >
          </div>
          <div class="data">暂无相关数据</div>
          <div class="data1">快去邀请好友赚奖励吧~</div>
          <!-- 按钮 -->
        </div>

        <!-- <div v-show="dataList.length!=0"> -->
        <!-- 我们的优势 -->
        <div v-for="item in dataQuin" :key="item.index" class="advantage">
          <div class="advantage-list">
            <div class="advantage-item">
              <div class="advantage-icon">
                <!-- <van-icon name="shop-o"></van-icon> -->
                <img style="width:7px;height:7px;" src="../../assets/images/icon-dot.png" alt>
              </div>
              <div class="advantage-con">
                <p class="title">
                  +86 {{item.phoneNo}}
                  <!-- <span
                    style="position: absolute;right: 80px;font-size:12px;color:#666666;margin-top:18px;"
                  >推荐人：小A</span>-->
                  <span
                    style="position: absolute;right: 20px;margin-top:18px"
                  >{{item.turnoverAmount}}USDT</span>
                </p>
                <p class="cont">{{item.createTime}}</p>
              </div>
            </div>
          </div>
        </div>
        <p  v-show="dataQuin.length!=0"
          v-if="flagBtm"
          style="font-size: 10px; color: rgb(204, 204, 204); margin: 40px 0;"
        >没有更多数据了！！！</p>
        <!-- 按钮 -->
        <div class="submit">
          <button type="submit" class="submit-btn" @click="showPopup">立即邀请</button>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 弹框 -->
    <!-- 弹窗隐藏区域 -->
    <div v-show="isPopupVisible" id="myModal" class="modal">
      <!-- 弹窗内容 -->
      <div class="modal-content">
        <span>
          <img
            style="width:20px;height:20px; position: absolute;right:50px;"
            @click="closePopup"
            src="../../assets/images/close.png"
            alt
          >
        </span>
        <div class="password" algin="center">复制以下链接，即可邀请好友哦~</div>
        <!-- 输入密码框 -->
        <div
          id="copyNum"
          class="meng"
          style="overflow:hidden"
        >http://endless.millionwallet.pro/invite/index.html?invitationCode={{yaoqCode}}</div>
        <textarea id="copyWord"></textarea>

        <!-- 确定 -->
        <div class="foor1">
          <button id="id_copy" @click="copys">复制</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import vue from "vue";
import axios from "axios";
import { listInvite, invite, register } from "../../axios/api.js";
import { Row, Col, Tab, Tabs, Button } from "vant";
export default {
  name: "text1",
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button
  },
  data() {
    return {
      flagBtm: false,
      pages: 1,
      loading: false,
      abc: "直接推荐" + "0" + "人",
      bbb: "下级推荐" + "0" + "人",
      yaoqCode: localStorage.getItem("yaoqCode"),
      isPopupVisible: false, //弹框
      active: 0,
      dataUide: [],
      dataQuin: [],
      dataList: [],
      name: [],

      data:{
        token: localStorage.getItem("setToken")
      },
    };
  },

  created() {
    this.award();
    this.direct();
    this.refresh();
    this.downUp();
    this.subordinate();
  },

  methods: {
    //返回上一页
    onClickLeft() {
      this.$router.push("/mine");
    },
    // 弹框
    showPopup() {
      this.isPopupVisible = true;
    },
    // 关闭弹框
    closePopup() {
      this.isPopupVisible = false;
    },
    // 点击关闭弹框
    purchase() {
      this.isPopupVisible = false;
    },
    copys() {
      var num = document.getElementById("copyNum").innerHTML;
      console.log(num);
      var word = document.getElementById("copyWord");
      word.value = num;
      word.select();
      document.execCommand("copy");
      this.$toast("复制成功！");
    },

    // 邀请
    award() {
      invite({
        params: {
          token: localStorage.getItem("setToken")
        }
      }).then(res => {
        console.log(res.data, 999);
        this.abc = "直接推荐" + res.data.data.directInvitePeopleNumber + "人";
        this.bbb =
          "下级推荐" + res.data.data.subordinateInvitePeopleNumber + "人";
        console.log(this.abc);
        console.log(this.bbb);
        if (res.data.data == null) {
          this.name.totalReward = "0";
          this.name.totalPeopleNumber = "0";
          this.name.directReward = "0";
          this.name.subordinateReward = "0";
        } else {
          this.name = res.data.data;
        }
      });
    },

    // 直接推荐
    direct() {
      var that = this;
      that.loading = true;
      listInvite({
        params: {
          token: localStorage.getItem("setToken"),
          page: that.pages,
          rows: "8",
          type: "2"
        }
      }).then(res => {
        //console.log(res.data.data);
        if (res.data.data.length == 0) {
          that.flagBtm = true;
          return false;
        } else {
          that.dataUide = res.data.data;
        }
      });
    },

    // 下级推荐
    subordinate() {
      var that = this;
      that.loading = true;
      listInvite({
        params: {
          token: localStorage.getItem("setToken"),
          page: that.pages,
          rows: "8",
          type: "3"
        }
      }).then(res => {
        //console.log(res.data.data);
        if (res.data.data.length == 0) {
          that.flagBtm = true;
          return false;
        } else {
          this.dataQuin = res.data.data;
        }
      });
    },

    //上拉加载
    downUp() {
      var that = this;
      var startX, startY, endX, endY, X, Y;
      $("body")
        .on("touchstart", function(e) {
          var touch = e.originalEvent.targetTouches[0];
          startX = touch.pageX;
          startY = touch.pageY;
        })
        .on("touchend", function(e) {
          var touch = e.originalEvent.changedTouches[0];
          endX = touch.pageX;
          endY = touch.pageY;
          X = endX - startX;
          Y = endY - startY;
          if (Y < -30) {
            that.pages++;
            console.log(that.pages);
            listInvite({
              params: {
                token: localStorage.getItem("setToken"),
                page: that.pages,
                rows: "8",
                type: "2"
              }
            }).then(res => {
              if (res.data.data.length <= 0) {
                that.flagBtm = true;
                return false;
              } else {
                for (var i = 0; i < res.data.data.length; i++) {
                  that.dataUide.push(res.data.data[i]);
                }
              }
              console.log(that.dataUide, 88888);
            });
          }
        });
    },

    // 下级推荐刷新
    refresh() {
      var that = this;
      var startX, startY, endX, endY, X, Y;
      $("body")
        .on("touchstart", function(e) {
          var touch = e.originalEvent.targetTouches[0];
          startX = touch.pageX;
          startY = touch.pageY;
        })
        .on("touchend", function(e) {
          var touch = e.originalEvent.changedTouches[0];
          endX = touch.pageX;
          endY = touch.pageY;
          X = endX - startX;
          Y = endY - startY;
          if (Y < -30) {
            that.pages++;
            console.log(that.pages);
            listInvite({
              params: {
                token: localStorage.getItem("setToken"),
                page: that.pages,
                rows: "8",
                type: "3"
              }
            }).then(res => {
              if (res.data.data.length <= 0) {
                that.flagBtm = true;
                return false;
              } else {
                for (var i = 0; i < res.data.data.length; i++) {
                  that.dataQuin.push(res.data.data[i]);
                }
              }
              console.log(that.dataQuin, 88888);
            });
          }
        });
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/less/variable.less";
/deep/.van-tab {
  color: @base_textColor;
}
/deep/ .van-tabs__line {
  background: none;
}
/deep/ .van-tab--active {
  color: #d1a568;
}
/deep/ .van-tabs__wrap {
  position: relative;
}
/deep/ .van-hairline--bottom::after {
  border-bottom-width: 0;
}
/deep/ .van-hairline--top-bottom::after {
  border-width: 0;
}
/deep/ .van-tabs--line {
  padding-top: 0;
}
#copyWord {
  position: fixed;
  left: 130%;
}
.admin {
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(209, 165, 104, 1);
  margin-top: 15px;
}
.van-row .van-col {
  font-size: 14px;
  font-family: PingFang-SC-Regular;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  padding-top: 15px;
}
.xian {
  width: 100%;
  height: 10px;
  background: rgba(246, 246, 248, 1);
  margin-top: 15px;
}
.data {
  font-size: 12px;
  font-family: PingFang-SC-Regular;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  margin-top: 15px;
}
.data1 {
  font-size: 12px;
  font-family: PingFang-SC-Regular;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
}
.submit {
  margin-top: 0.67rem;
  width: 100%;
  background-color: #fff;
  color: #fff;
  font-size: @base_textSize;
  .submit-btn {
    width: 90%;
    height: 34px;
    text-align: center;
    line-height: 34px;
    font-size: 14px;
    background-color: #d6ab6f;
    color: white;
    border-radius: 20px;
    margin: 0vh auto 0;
    border: 0;
  }
}
.bi1 {
  display: flex;
  justify-content: space-around;
}
.bi1 p {
  font-size: 14px;
  font-family: PingFang-SC-Regular;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  text-align: left;
  padding-top: 10px;
}
.bi {
  display: flex;
}

.bi p {
  font-size: 14px;
  font-family: PingFang-SC-Regular;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  text-align: left;
  padding-top: 10px;
}
.advantage {
  width: 100%;
  margin-top: 10px;
  // border-top: 1px solid #efefef;
  //  border-bottom:1px solid #EFEFEF;
  .advantage-title {
    padding: 10px 0;
    font-size: @base_textSize;
    color: @base_textColor;
  }
  .advantage-list {
    padding: 10px 15px;
    .advantage-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    .advantage-item {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 10px 0;
      border-bottom: @base_boder;
      .advantage-icon {
        // width: 10%;
        margin-right: 10px;
        font-size: 3em;
        color: #ff976a;
        margin-top: -22px;
        i {
          vertical-align: super;
        }
      }
      .advantage-con {
        width: 90%;
        .title {
          text-align: left;
          font-size: 14px;
          font-weight: bold;
          color: #323233;
        }
        .cont {
          text-align: left;
          font-size: 12px;
          color: #323233;
          margin: 5px 0;
        }
        .title span {
          font-size: 13px;
          font-family: PingFang-SC-Medium;
          font-weight: 500;
          color: rgba(209, 165, 104, 1);

          right: 16px;
        }
      }
    }
  }
}
.van-button::before {
  content: " ";
  position: absolute;
  top: 69%;
  left: 50%;
  opacity: 0;
  width: 90%;
  height: 100%;
  border: inherit;
  border-color: #000;
  background-color: #000;
  border-radius: inherit;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.van-button--large {
  width: 90%;
  height: 45px;
  line-height: 45px;
  background: #d1a658;
  font-size: 18px;
  border-radius: 20px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  border: 1px solid #d1a658;
  // top:20px;
}
.van-tabs .van-tab__pane {
  width: 100%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  // height: 100vh;
}
//   弹框
.modal {
  display: block;
  /* 默认隐藏 */
  /*生成绝对定位的元素，相对于浏览器窗口进行定位。*/
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  /*设置弹窗位置*/
  padding-top: 250px;
  padding-bottom: 100px;
  /*浮在全屏上*/
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  text-align: center;
}

/* 弹窗内容 */

.modal-content {
  /*弹窗背景色设置*/
  background-color: #fefefe;
  margin: auto;
  width: 80%;
  height: 200px;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
}
//   输入交易密码
.modal-content .password {
  font-size: 15px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  padding-top: 40px;
}
.meng {
  height: 25px;
  width: 80%;
  background: rgba(239, 239, 239, 1);
  border-radius: 5px;
  margin: 15px auto;
  line-height: 20px;
}
.foor1 button {
  width: 80%;
  height: 45px;
  background: #d1a568;
  border: 1px solid #d1a568;
  font-size: 18px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  border-radius: 20px;
  // margin-top: -15px;
}
.text {
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}
</style>

